<template>
	<view class="kuang">
		<image class="bj" src="/static/图层 1@3x.png" mode=""></image>
		<text class="title">活动发布</text>
	</view>
	<view class="jiantou" @click="goBack"></view>

	<!-- 活动列表视图 -->
	<view class="quyi" v-if="!showForm">
		<!-- 标签页 -->
		<view class="tabs">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'published' }"
				@click="switchTab('published')"
			>
				<text>已上架</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'unpublished' }"
				@click="switchTab('unpublished')"
			>
				<text>未上架</text>
			</view>
		</view>

		<!-- 活动列表 -->
		<scroll-view class="activity-list" scroll-y>
			<view 
				class="activity-item" 
				v-for="item in filteredActivities" 
				:key="item.id"
				@click="showActivityDetail(item)"
			>
				<view class="activity-content">
					<text class="activity-title">{{ item.title }}</text>
					<view class="activity-status" v-if="activeTab === 'unpublished'">
						<text 
							class="status-text" 
							:class="getStatusClass(item.status)"
						>
							{{ getStatusText(item.status) }}
						</text>
					</view>
					<text class="activity-time">{{ item.time }}</text>
				</view>
				<button 
					class="action-btn" 
					:class="getActionBtnClass(item.status, activeTab)"
					@click.stop="handleAction(item)"
				>
					{{ getActionText(item.status, activeTab) }}
				</button>
			</view>
		</scroll-view>
	</view>

	<!-- 发布表单视图 -->
	<view class="quyi form-container" v-if="showForm">
		<view class="form">
			<view class="form-item">
				<text class="label">标题:</text>
				<input 
					class="input" 
					v-model="formData.title" 
					placeholder="请输入活动标题" 
				/>
			</view>

			<view class="form-item content-item">
				<text class="label">内容:</text>
				<textarea 
					class="textarea" 
					v-model="formData.content" 
					placeholder="请输入活动内容"
					maxlength="500"
				></textarea>
			</view>

			<view class="form-item upload-item">
				<text class="label">图片/视频:</text>
				<view class="upload-area" @click="chooseMedia">
					<view v-if="formData.mediaUrl" class="media-preview">
						<image 
							v-if="formData.mediaType === 'image'" 
							:src="formData.mediaUrl" 
							mode="aspectFill"
							class="preview-image"
						></image>
						<video 
							v-else-if="formData.mediaType === 'video'" 
							:src="formData.mediaUrl" 
							class="preview-video"
						></video>
						<view class="delete-media" @click.stop="deleteMedia">
							<text>×</text>
						</view>
					</view>
					<view v-else class="upload-placeholder">
						<text class="upload-icon">+</text>
						<text class="upload-text">点击选择上传</text>
					</view>
				</view>
			</view>
		</view>
	</view>

	<!-- 底部按钮 -->
	<view class="footer-btn-container" v-if="!showForm">
		<button class="publish-btn" @click="showPublishForm">
			<text class="plus-icon">+</text>
			<text>发布活动</text>
		</button>
	</view>

	<view class="footer-btn-container" v-if="showForm">
		<button class="submit-btn" @click="submitActivity">发布</button>
	</view>

	<!-- 活动详情弹窗 -->
	<uni-popup ref="activityDetailPopup" type="bottom" :animation="false">
		<view class="popup-content">
			<view class="popup-header">
				<text class="popup-title">活动详情</text>
				<view class="popup-close" @click="closeActivityDetail">
					<text class="close-icon">×</text>
				</view>
			</view>
			<scroll-view class="popup-scroll" scroll-y>
				<view class="detail-item">
					<text class="detail-label">标题:</text>
					<text class="detail-value">{{ currentActivity.title || '' }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">发布人:</text>
					<text class="detail-value">{{ currentActivity.publisher || '大美汽修' }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">发布时间:</text>
					<text class="detail-value">{{ currentActivity.time || '' }}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">审核状态:</text>
					<text 
						class="detail-value status-text"
						:class="getStatusClass(currentActivity.status)"
					>
						{{ getDetailStatusText(currentActivity.status, currentActivity.isPublished) }}
					</text>
				</view>
				<view class="detail-item" v-if="currentActivity.reviewTime">
					<text class="detail-label">审核时间:</text>
					<text class="detail-value">{{ currentActivity.reviewTime || '' }}</text>
				</view>
				<view class="detail-item" v-if="currentActivity.reviewReason">
					<text class="detail-label">审核说明:</text>
					<text class="detail-value">{{ currentActivity.reviewReason || '' }}</text>
				</view>
				<view class="detail-item detail-content">
					<text class="detail-label">发布内容:</text>
					<text class="detail-content-text">{{ currentActivity.content || '活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容' }}</text>
				</view>
				<view class="detail-item" v-if="currentActivity.imageUrl">
					<text class="detail-label">图片:</text>
					<view class="image-container">
						<image 
							:src="currentActivity.imageUrl || '/static/c1.png'" 
							mode="aspectFit" 
							class="detail-image"
						></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, computed } from 'vue'

// 当前标签页
const activeTab = ref('published')
// 是否显示表单
const showForm = ref(false)
// 活动详情弹窗引用
const activityDetailPopup = ref(null)
// 当前查看的活动
const currentActivity = ref({})

// 表单数据
const formData = ref({
	title: '',
	content: '',
	mediaUrl: '',
	mediaType: '' // 'image' 或 'video'
})

// 活动列表数据
const activities = ref([
	{
		id: 1,
		title: '洗车优惠活动开始领取了',
		time: '2023-03-10 11:09',
		status: 'published', // published, reviewing, success, failed
		isPublished: true,
		publisher: '大美汽修',
		reviewTime: '2023-03-10 15:09',
		content: '活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容',
		imageUrl: '/static/article01.jpg'
	},
	{
		id: 2,
		title: '阳春三月油江南活动开始报名了',
		time: '2023-03-10 11:09',
		status: 'reviewing',
		isPublished: false,
		publisher: '大美汽修'
	},
	{
		id: 3,
		title: '春季保养套餐特惠',
		time: '2023-03-10 11:09',
		status: 'success',
		isPublished: false,
		publisher: '大美汽修',
		reviewTime: '2023-03-10 15:09',
		content: '春季保养套餐限时特惠，包含机油更换、机滤更换、空调清洗等服务',
		imageUrl: '/static/article01.png'
	},
	{
		id: 4,
		title: '轮胎更换优惠活动',
		time: '2023-03-10 11:09',
		status: 'failed',
		isPublished: false,
		publisher: '大美汽修',
		reviewTime: '2023-03-10 15:09',
		reviewReason: '活动内容不符合平台规范，请修改后重新提交',
		content: '轮胎更换优惠活动，购买指定品牌轮胎享受8折优惠',
		imageUrl: '/static/article01.jpg'
	}
])

// 根据当前标签页过滤活动
const filteredActivities = computed(() => {
	if (activeTab.value === 'published') {
		return activities.value.filter(item => item.isPublished)
	} else {
		return activities.value.filter(item => !item.isPublished)
	}
})

// 切换标签页
const switchTab = (tab) => {
	activeTab.value = tab
}

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		reviewing: '审核中',
		success: '审核成功',
		failed: '审核失败'
	}
	return statusMap[status] || ''
}

// 获取详情页状态文本
const getDetailStatusText = (status, isPublished) => {
	if (isPublished) {
		return '审核通过'
	}
	const statusMap = {
		reviewing: '待审核',
		success: '审核通过',
		failed: '审核不通过'
	}
	return statusMap[status] || ''
}

// 显示活动详情
const showActivityDetail = (item) => {
	currentActivity.value = { ...item }
	activityDetailPopup.value.open()
}

// 关闭活动详情
const closeActivityDetail = () => {
	activityDetailPopup.value.close()
	currentActivity.value = {}
}

// 获取状态样式类
const getStatusClass = (status) => {
	const classMap = {
		reviewing: 'status-reviewing',
		success: 'status-success',
		failed: 'status-failed'
	}
	return classMap[status] || ''
}

// 获取操作按钮文本
const getActionText = (status, tab) => {
	if (tab === 'published') {
		return '下架'
	}
	if (status === 'success') {
		return '上架'
	}
	return '删除'
}

// 获取操作按钮样式类
const getActionBtnClass = (status, tab) => {
	if (tab === 'published') {
		return 'btn-takedown'
	}
	if (status === 'success') {
		return 'btn-publish'
	}
	return 'btn-delete'
}

// 处理操作按钮点击
const handleAction = (item) => {
	const action = getActionText(item.status, activeTab.value)
	if (action === '下架') {
		uni.showModal({
			title: '提示',
			content: '确定要下架此活动吗？',
			success: (res) => {
				if (res.confirm) {
					item.isPublished = false
					uni.showToast({ title: '已下架', icon: 'success' })
				}
			}
		})
	} else if (action === '上架') {
		uni.showModal({
			title: '提示',
			content: '确定要上架此活动吗？',
			success: (res) => {
				if (res.confirm) {
					item.isPublished = true
					uni.showToast({ title: '已上架', icon: 'success' })
				}
			}
		})
	} else if (action === '删除') {
		uni.showModal({
			title: '提示',
			content: '确定要删除此活动吗？',
			success: (res) => {
				if (res.confirm) {
					const index = activities.value.findIndex(a => a.id === item.id)
					if (index > -1) {
						activities.value.splice(index, 1)
						uni.showToast({ title: '已删除', icon: 'success' })
					}
				}
			}
		})
	}
}

// 显示发布表单
const showPublishForm = () => {
	showForm.value = true
}

// 选择媒体文件
const chooseMedia = () => {
	uni.showActionSheet({
		itemList: ['选择图片', '选择视频'],
		success: (res) => {
			if (res.tapIndex === 0) {
				// 选择图片
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						formData.value.mediaUrl = res.tempFilePaths[0]
						formData.value.mediaType = 'image'
					}
				})
			} else if (res.tapIndex === 1) {
				// 选择视频
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					success: (res) => {
						formData.value.mediaUrl = res.tempFilePath
						formData.value.mediaType = 'video'
					}
				})
			}
		}
	})
}

// 删除媒体
const deleteMedia = () => {
	formData.value.mediaUrl = ''
	formData.value.mediaType = ''
}

// 提交活动
const submitActivity = () => {
	if (!formData.value.title.trim()) {
		uni.showToast({ title: '请输入活动标题', icon: 'none' })
		return
	}
	if (!formData.value.content.trim()) {
		uni.showToast({ title: '请输入活动内容', icon: 'none' })
		return
	}

	// 创建新活动
	const newActivity = {
		id: activities.value.length + 1,
		title: formData.value.title,
		time: new Date().toISOString().slice(0, 16).replace('T', ' '),
		status: 'reviewing',
		isPublished: false,
		publisher: '大美汽修',
		content: formData.value.content,
		imageUrl: formData.value.mediaType === 'image' ? formData.value.mediaUrl : ''
	}
	
	activities.value.push(newActivity)
	
	// 重置表单
	formData.value = {
		title: '',
		content: '',
		mediaUrl: '',
		mediaType: ''
	}
	
	// 返回列表视图
	showForm.value = false
	
	// 切换到未上架标签
	activeTab.value = 'unpublished'
	
	uni.showToast({ title: '发布成功，等待审核', icon: 'success' })
}

// 返回
const goBack = () => {
	if (showForm.value) {
		showForm.value = false
	} else {
		uni.navigateBack({ delta: 1 })
	}
}
</script>

<style scoped>
	.bj {
		position: absolute;
		z-index: 1;
		width: 750rpx;
		height: 430rpx;
	}

	.kuang {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 35rpx;
		position: absolute;
		z-index: 2;
		color: white;
		margin-top: 60rpx;
	}

	.jiantou {
		position: absolute;
		z-index: 2;
		width: 30rpx;
		height: 30rpx;
		border: 5rpx solid white;
		border-top: none;
		border-left: none;
		transform: rotate(135deg);
		margin-top: 60rpx;
		margin-left: 30rpx;
	}

	.quyi {
		position: absolute;
		z-index: 2;
		background-color: white;
		width: 710rpx;
		min-height: 800rpx;
		margin-top: 140rpx;
		margin-left: 20rpx;
		border-radius: 30rpx;
		border-bottom: 2rpx solid #f8f8f8;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	/* 标签页样式 */
	.tabs {
		display: flex;
		margin-top: 0;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		background-color: #f5f5f5;
		padding: 8rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		background-color: transparent;
		color: #057AFF;
		font-size: 30rpx;
		border-radius: 20rpx;
		transition: all 0.3s ease;
		position: relative;
		font-weight: 500;
	}

	.tab-item.active {
		background-color: #057AFF;
		color: white;
		font-weight: 600;
		box-shadow: 0 2rpx 8rpx rgba(5, 122, 255, 0.2);
	}

	.tab-item:first-child.active {
		border-radius: 20rpx 0 0 20rpx;
	}

	.tab-item:last-child.active {
		border-radius: 0 20rpx 20rpx 0;
	}

	/* 活动列表样式 */
	.activity-list {
		max-height: 1000rpx;
		padding: 32rpx 24rpx 120rpx;
		overflow-y: auto;
		box-sizing: border-box;
	}

	.activity-item {
		display: flex;
		align-items: flex-start;
		padding: 32rpx 24rpx;
		margin-bottom: 24rpx;
		background-color: #fafafa;
		border-radius: 16rpx;
		border: 2rpx solid #f0f0f0;
		box-sizing: border-box;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.activity-item:last-child {
		margin-bottom: 0;
	}

	.activity-content {
		flex: 1 1 0;
		min-width: 0;
		overflow: hidden;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.activity-title {
		font-size: 30rpx;
		color: #111;
		margin-bottom: 16rpx;
		line-height: 1.6;
		font-weight: 500;
		letter-spacing: 0.3rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		word-break: break-word;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.activity-status {
		margin-bottom: 14rpx;
	}

	.status-text {
		font-size: 26rpx;
		font-weight: 400;
		display: inline-block;
		padding: 6rpx 14rpx;
		border-radius: 8rpx;
	}

	.status-reviewing {
		color: #ff4d4f;
		background-color: rgba(255, 77, 79, 0.12);
	}

	.status-success {
		color: #52c41a;
		background-color: rgba(82, 196, 26, 0.12);
	}

	.status-failed {
		color: #999;
		background-color: rgba(153, 153, 153, 0.12);
	}

	.activity-time {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
		line-height: 1.4;
	}

	.action-btn {
		padding: 0 28rpx;
		height: 64rpx;
		width: 120rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		font-size: 26rpx;
		color: white;
		background-color: #057AFF;
		border: none;
		flex: 0 0 120rpx;
		box-shadow: 0 4rpx 12rpx rgba(5, 122, 255, 0.25);
		white-space: nowrap;
		text-align: center;
		box-sizing: border-box;
		margin-left: auto;
	}

	/* 表单样式 */
	.form-container {
		padding: 48rpx 32rpx 120rpx;
	}

	.form {
		padding: 0;
	}

	.form-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 48rpx;
	}

	.label {
		width: 160rpx;
		color: #111;
		font-size: 30rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
		padding-top: 12rpx;
		font-weight: 500;
	}

	.input {
		flex: 1;
		background: #ffffff;
		border: 2rpx solid #ededed;
		border-radius: 16rpx;
		padding: 24rpx 32rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.content-item {
		align-items: flex-start;
	}

	.textarea {
		flex: 1;
		background: #ffffff;
		border: 2rpx solid #ededed;
		border-radius: 16rpx;
		padding: 24rpx 32rpx;
		font-size: 28rpx;
		color: #333;
		min-height: 240rpx;
		line-height: 1.6;
	}

	.upload-item {
		align-items: flex-start;
	}

	.upload-area {
		flex: 1;
		width: 100%;
		height: 320rpx;
		min-height: 320rpx;
		border: 2rpx dashed #d9d9d9;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fafafa;
		position: relative;
		box-sizing: border-box;
		transition: all 0.3s;
	}

	.upload-area:active {
		background-color: #f0f0f0;
		border-color: #057AFF;
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.upload-icon {
		font-size: 88rpx;
		color: #d9d9d9;
		margin-bottom: 16rpx;
		font-weight: 300;
		line-height: 1;
	}

	.upload-text {
		font-size: 26rpx;
		color: #999;
		letter-spacing: 0.5rpx;
	}

	.media-preview {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.preview-image {
		width: 100%;
		height: 100%;
	}

	.preview-video {
		width: 100%;
		height: 100%;
	}

	.delete-media {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 40rpx;
		line-height: 1;
	}

	/* 底部按钮样式 */
	.footer-btn-container {
		position: fixed;
		bottom: 48rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
	}

	.publish-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 420rpx;
		height: 96rpx;
		background: linear-gradient(135deg, #2b77ff 0%, #0556db 100%);
		color: white;
		border-radius: 48rpx;
		font-size: 34rpx;
		font-weight: 500;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(43, 119, 255, 0.35);
		letter-spacing: 1rpx;
	}

	.plus-icon {
		font-size: 44rpx;
		margin-right: 16rpx;
		font-weight: 300;
		line-height: 1;
	}

	.submit-btn {
		width: 420rpx;
		height: 96rpx;
		background: linear-gradient(135deg, #2b77ff 0%, #0556db 100%);
		color: white;
		border-radius: 48rpx;
		font-size: 34rpx;
		font-weight: 500;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(43, 119, 255, 0.35);
		letter-spacing: 1rpx;
	}

	/* 活动详情弹窗样式 */
	.popup-content {
		background-color: white;
		border-radius: 30rpx 30rpx 0 0;
		padding-bottom: 40rpx;
	}

	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		border-bottom: 2rpx solid #f0f0f0;
		position: relative;
	}

	.popup-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #111;
	}

	.popup-close {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.close-icon {
		font-size: 50rpx;
		color: #999;
		font-weight: 300;
	}

	.popup-scroll {
		max-height: 900rpx;
	}

	.detail-item {
		display: flex;
		padding: 28rpx 32rpx;
		border-bottom: 2rpx solid #f5f5f5;
		align-items: flex-start;
	}

	.detail-label {
		width: 160rpx;
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
		padding-top: 6rpx;
	}

	.detail-value {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	.detail-content {
		flex-direction: column;
		align-items: flex-start;
	}

	.detail-content-text {
		margin-top: 16rpx;
		width: 100%;
		font-size: 28rpx;
		color: #333;
		line-height: 1.8;
		word-break: break-word;
	}

	.image-container {
		margin-top: 16rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.detail-image {
		width: 400rpx;
		height: 300rpx;
		border-radius: 16rpx;
	}

	/* 活动项点击效果 */
	.activity-item {
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.activity-item:active {
		background-color: #f0f0f0;
	}
</style>